import React from "react";
import Head from 'next/head'
import Wrapper from '@/components/Wrapper'
import { gallery } from '@/Data/Data'
import Image from 'next/image';

// Animation
import { motion } from 'framer-motion'
import { smoothIn } from '@/animate'

export default function Gallery() {
  return (
    <>
      <Head>
        <title>Maverick | Gallery</title>
      </Head>

      <Wrapper className="text-center flex pt-40 flex-col justify-center">
        <div>
          <motion.div 
          variants={smoothIn('up',0.2)}
          initial='hidden'
          animate='show'
          exit='hidden'
          className="uppercase font-semibold text-sm text-WhiteGray">
            - All Collection
          </motion.div>
            <motion.div 
            variants={smoothIn('left',0.5)}
            initial='hidden'
            animate='show'
            exit='hidden'
            transition={{duration: 1,ease:'easeInOut'}}
            className="container grid lg:grid-cols-2 gap-8 py-8">
              {
                gallery.map((gallery) => (
                  <div
                  key={gallery.id}
                  className="relative overflow-hidden rounded-xl group"
                  >
                    <div>
                      <Image
                      src={gallery.image}
                      width={480}
                      height={280}
                      alt='Gallery'
                      className="w-full transition-transform duration-300 transform hover:scale-125 hover:rotate-2"
                      />
                    </div>
                    <div className="absolute bottom-5 uppercase bg-Black/60 text-[1rem] tracking-widest text-WhiteGray text-left overflow-hidden ml-0 w-max">
                      <div className="px-3 my-2">
                        {gallery.name}

                      </div>
                    </div>
                  </div>
                ))
              }
            </motion.div>
        </div>
      </Wrapper>
    </>
  )
}